<template>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" success-text="刷新成功">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <ul>
                <li v-for="item in list" :key="item.id" @click="toDetail(item.id)">
                    <div class="itemimg">
                        <van-image :src="item.image" />
                    </div>
                    <div class="itemInfo">
                        <p class="van-multi-ellipsis--l2">{{ item.title }}</p>
                        <p class="price">￥{{ item.price }}.00</p>
                    </div>
                </li>
            </ul>
        </van-list>
    </van-pull-refresh>
</template>
<script>
// import axios from 'axios'
import request from '@/utils/request.js'
export default {
    data() {
        return {
            list: [],
            loading: false,
            finished: false, //
            pagination: 1,
            isLoading: false, // 是否正在下拉刷新
        }
    },
    // created() {
    //     request.get('/list').then(res => {
    //         console.log(res.data.data)
    //         this.list = res.data.data
    //     })
    // },
    methods: {
        toDetail(id) {
            // this.$router.push('/detail/' + id)
            // this.$router.push(`/detail/${id}`)
            // this.$router.push({ path: '/detail/' + id })
            this.$router.push({ name: 'detail', params: { id: id } })
            // this.$router.push({ path: '/detail', query: { id: id } }) // 结果是 /detail?id=
        },
        onRefresh() {
            this.isLoading = true
            // request.get('/list', {
            //     params: {
            //         pageNum: 10, pagination: 1
            //     }
            // }).then(res => {
            //     this.list = res.data.data
            //     this.pagination = 2
            //     this.isLoading = false
            //     this.finished = false // 比如当前下拉刷新是在已有所有数据加载完成的基础之上， finished已经是true了，所以下拉刷新之后要改回默认值
            // })
            setTimeout(() => {
                this.isLoading = false;
            }, 1000);
        },
        onLoad() {
            console.log('可以加载数据了')
            this.loading = true
            request.get('/list', {
                params: {
                    pageNum: 10, pagination: this.pagination
                }
            }).then(res => {
                // this.list = this.list.concat(res.data.list)
                this.list = [...this.list, ...res.data.data]
                this.loading = false
                this.pagination++
                if (this.list.length >= res.data.total) {
                    this.finished = true
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
ul {
    overflow: hidden;

    li {
        width: 49%;
        height: 230px;
        float: left;
        margin: 0.5%;

        .itemimg {
            height: 166px;
            overflow: hidden;

            .van-image {
                width: 100%;
            }
        }

        .itemInfo {
            padding: 2px 8px;

            .price {
                color: red;
            }
        }
    }
}
</style>